<template>
	<view class="zlxx">
		<!-- <div id="zlxx_chart" class="chart" ref="chart"></div> -->
		<l-echart class="chart" ref="chart" @finished="init"></l-echart>
		<view class="customTooltips" :style="{ left: position[0] + 'px', top: position[1] + 'px' }" v-if="params.length && position.length && showTip">
			<view>这是个自定的tooltips</view>
			<view>{{ params[0]['axisValue'] }}</view>
			<view v-for="(item, index) in params" :key="index">
				<view>
					<text>{{ item.seriesName }}</text>
					<text>{{ item.value }}</text>
				</view>
			</view>
		</view>
		<div class="legend">
			<div class="legend_item" @click="itemBtn(item)" v-for="(item, index) in data" :key="index">
				<div class="label">
					<div class="icon qy" v-if="item.name === '企业'"></div>
					<div class="icon gr" v-if="item.name === '个人'"></div>
					<div class="icon dzyx" v-if="item.name === '大专院校'"></div>
					<div class="icon kyjg" v-if="item.name === '科研机构'"></div>
					<div class="icon jgtt" v-if="item.name === '机关团体'"></div>
					{{ item.name }}
				</div>
				<div class="percentage">{{ item.percentage }}</div>
			</div>
		</div>
	</view>
</template>

<script>
import { getPatentCensus } from '@/api/zhyp/statistics';
import * as echarts from 'echarts';
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
	data() {
		return {
			myChart: null,
			// yqType: [],
			// yqNum: [],
			data: [],
			option: {
					tooltip: {
						trigger: 'item',
						renderMode: 'richText',
						position: (point, params, dom, rect, size) => {
							// 假设自定义的tooltips尺寸
							const box = [170, 170];
							// 偏移
							const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20;
							const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20;
							const x = point[0] + offsetX;
							const y = point[1] + offsetY;

							this.position = [x, y];
							this.params = params;
						},
						formatter:'{b}:\n{c}'
					},
					// legend: {
					//   top: "5%",
					//   left: "center",
					// },
					color: ['rgba(21, 99, 255, 0.1)', '#66e1df', '#d0deee', '#1563ff', '#34ffbf'],
					series: [
						{
							name: '专利信息',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: false,
									fontSize: 40,
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: []
						}
					]
				},
			showTip: false,
			position: [],
			params: [],
			code:'6103'
		};
	},
	created() {
		this.getData();
	},
	methods: {
		classFormat(item) {
			if (item === '企业') {
				return 'qy';
			} else if (item === '个人') {
				return 'gr';
			} else if (item === '大专院校') {
				return 'dzyx';
			} else if (item === '科研机构') {
				return 'kyjg';
			} else if (item === '机关团体') {
				return 'jgtt';
			}
		},
		async getData() {
			const res = await getPatentCensus(this.code);
			let sum = res.data.reduce((a, b) => a + b.value, 0);
			// res.data.forEach((i) => {
			//   this.yqType.push(i.name);
			//   this.yqNum.push(i.value);
			// });
			this.data = res.data;
			for (let index = 0; index < this.data.length; index++) {
				this.$set(this.data[index], 'percentage', ((this.data[index].value / sum) * 100).toFixed(2) + '%');
			}
			this.option.series[0].data = this.data
			this.$refs.chart.setOption(this.option)
		},
		againRender(){
			this.$refs.chart.setOption(this.option)
		},
		init() {
			this.$refs.chart.init(echarts, (chart) => {
				setTimeout(() => {
					chart.setOption(this.option);
				}, 500);
				// 监听tooltip显示事件
				chart.on('showTip', (params) => {
					this.showTip = true;
				});
				chart.on('hideTip', (params) => {
					setTimeout(() => {
						this.showTip = false;
					}, 300);
				});
			});
			// var myChart = echarts.init(document.getElementById('zlxx_chart'));
			// var option = {
			//   tooltip: {
			//     trigger: "item",
			//   },
			//   // legend: {
			//   //   top: "5%",
			//   //   left: "center",
			//   // },
			//   color: [
			//     "rgba(21, 99, 255, 0.1)",
			//     "#66e1df",
			//     "#d0deee",
			//     "#1563ff",
			//     "#34ffbf",
			//   ],
			//   series: [
			//     {
			//       name: "专利信息",
			//       type: "pie",
			//       radius: ["40%", "70%"],
			//       avoidLabelOverlap: false,
			//       label: {
			//         show: false,
			//         position: "center",
			//       },
			//       emphasis: {
			//         label: {
			//           show: false,
			//           fontSize: 40,
			//           fontWeight: "bold",
			//         },
			//       },
			//       labelLine: {
			//         show: false,
			//       },
			//       data: this.data,
			//     },
			//   ],
			// };
			// option && myChart.setOption(option);
		}
	}
};
</script>

<style lang="scss">
.zlxx {
	padding-top: 32rpx;
	color: #d0deee;
	font-size: 24rpx;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	.chart {
		width: 230rpx;
		aspect-ratio: 1;
	}
	.legend {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		.legend_item {
			margin-bottom: 16rpx;
			cursor: pointer;
			width: 100%;
			height: 48rpx;
			background-color: rgba(18, 128, 151, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.label {
				display: flex;
				align-items: center;
				.icon {
					margin-left: 16rpx;
					margin-right: 24rpx;
					width: 18rpx;
					height: 18rpx;
					&.qy {
						background-color: rgba(21, 99, 255, 0.1);
					}
					&.gr {
						background-color: #66e1df;
					}
					&.dzyx {
						background-color: #d0deee;
					}
					&.kyjg {
						background-color: #1563ff;
					}
					&.jgtt {
						background-color: #34ffbf;
					}
				}
			}
			.percentage {
				margin-right: 16rpx;
			}
		}
	}
}
</style>